<template>
	<view class="category" >
		<view class="category-item" v-for="(item, index) in list" :key="index" @click="setCurCategory(item)">
			<view class="list-box select-item" v-if="curId == item.id">
				<view style="font-size: 20px;">
					<image  style="width: 30px;height: 30px;margin-top: 5px;" mode="aspectFill" :src="globalUrl+item.icon"></image>
				</view>
			</view>
			<view class="list-box" v-else >
				<view style="font-size: 20px;">
					<image  style="width: 30px;height: 30px;margin-top: 5px;" mode="aspectFill" :src="globalUrl+item.icon"></image>
				</view>
			</view>
			<view class="box-text" style="color: #AB7559;" v-if="curId == item.id">{{item.name}}</view>
			<view class="box-text" v-else>{{item.name}}</view>
		</view>
		<view class="category-item"  @click="goAddClass()">
			<view class="list-box" >
				<view style="font-size: 20px;">+</view>
			</view>
			<view class="box-text">设置</view>
		</view>
	</view>
</template>

<script>
	import icons from '@/common/icon.js'
	export default {
		props: {
			list: {
				type: Array
			},
			value: {
				type: Number | null
			},
			status: {
				type: Number | 0
			}
		},
		data() {
			return {
				curId: null,
				iconList: [],
				user:[],
				globalUrl:getApp().globalData.url,
				
			}
		},
		created() {
			this.curId = this.value
		},
		watch: {
			value(val) {
				this.curId = val
				console.log(val)
			}
		},
		mounted() {
			var _self =this
		
			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						_self.user = res.data
						_self.getIconList()
					}
				},
				fail: function(e) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})
		},
		methods: {
			getIconList() {
				// var uri = getApp().globalData.url + 'modules/icon/appList?type=3'
				var _self =this
				var data = {
					type: 3
				}
				this.$api.listHabitIcon(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						_self.iconList = resData.data;
					}
				})
				
			},
			getIcon(item) {
				var checkedUrl = ""
				var _self =this
				for (var i = 0; i < _self.iconList.length; i++) {
					if (item.name == _self.iconList[i].name) {
						checkedUrl = _self.iconList[i].url
						break;
					}
				}
				return checkedUrl;
			},
			setCurCategory(item) {
				// console.log('点击了', id)
				if (item.is_set) {
					this.$emit('openSet')
				} else {
					this.curId = item.id
					this.$emit('change', item.id)
				}
			},

			// getIcon(checkedIconIndex){
			// 	var checkedIcon = ""
				
			// 	for (var i = 0; i < this.iconList.length; i++) {
			// 		if(checkedIconIndex == i){
			// 			checkedIcon = this.iconList[i]
			// 			break;
			// 		}
					
			// 	}
			// 	console.log(checkedIcon)
			// 	return checkedIcon;
			// },
			
			goAddClass() {
				uni.navigateTo({
					url: '/pages/drink/listDrinkClass?type=drink'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.category {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;

		.category-item {
			text-align: center;
			width: 20%;
			margin-bottom: 10px;
		}
	}

	.list-box {
		background-color: #f7f7f7;
		border-radius: 100%;
		box-sizing: border-box;
		margin: 0 auto;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2px solid #FEF2F2;
		&.select-item {
			background-color: #FEF2F2;
			border: 2px solid #AB7559;
		}

		.icon {
			// width: 100%;
			font-size: 50rpx;
			align-items: center;
			justify-content: center;
			width: 70rpx;
			height: 70rpx;
		}
	}

	.box-text {
		font-size: 25rpx;
		color: #606266;
		margin-top: 5px;
	}
</style>
